<template>
  <dl>
    <dt>{{ $t('pageOverview.serverInformation') }}</dt>
    <dd></dd>
    <dt>{{ $t('pageOverview.model') }}：</dt>
    <dd>{{ dataFormatter(serverModel) }}</dd>
    <dt>{{ $t('pageOverview.serialNumber') }}：</dt>
    <dd>{{ dataFormatter(serverSerialNumber) }}</dd>
  </dl>
</template>

<script>
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import { mapState } from 'vuex';

export default {
  name: 'Server',
  mixins: [DataFormatterMixin],
  computed: {
    ...mapState({
      server: (state) => state.system.systems[0],
      serverModel() {
        return this.server?.model;
      },
      serverSerialNumber() {
        return this.server?.serialNumber;
      },
    }),
  },
  created() {
    this.$store.dispatch('system/getSystem').finally(() => {
      this.$root.$emit('overview-server-complete');
    });
  },
};
</script>
<style scoped>
dl > dt:first-child {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 20px;
}
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 10px;
  column-gap: 10px;
}
</style>
